<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>最强大脑拼王者</title>
    <script type="text/javascript">
        // 根据屏幕的宽度 来设置 html的 font-size
        // 计算 font-size
        var fontSize = window.screen.availWidth / 20;
        document.querySelector('html').style.fontSize = fontSize + 'px';
        window.onresize = function () {
            // 计算 font-size
            var fontSize = window.screen.availWidth / 20;
            document.querySelector('html').style.fontSize = fontSize + 'px';
        }
        // 跟媒体查询比 在移动端使用 没有优劣之分
        // 面试问道 媒体查询 还有 js 都回答 即可
    </script>
    <link rel="stylesheet" type="text/css" href="css/rank_game.css" />
</head>
<body>
    <div class="app">
        <div class="top">
            <div class="head"></div>
            <div class="progress"></div>
            <!--级别-->
            <div class="level">Lv.2</div>
            <div class="marroon"></div>
            <div class="money"></div>
            <div class="money_num">165</div>
        </div>
        <div class="grade">
            <div class="grade1">
                <div class="grade_name">伶俐新手</div>
                <div class="money"></div>
                <div class="money_num">165</div>
                <div class="star"></div>
                <div class="star s1"></div>
                <div class="star s2"></div>
                <a href="/match.html"></a>
            </div>
            <div class="grade1 g2">
                <div class="grade_name">伶俐新手2</div>
                <div class="money"></div>
                <div class="money_num">165</div>
                <div class="star"></div>
                <div class="star s1"></div>
                <div class="star s2"></div>
            </div>
            <div class="grade1 g3">
                <div class="grade_name">伶俐新手3</div>
                <div class="money"></div>
                <div class="money_num">165</div>
                <div class="star"></div>
                <div class="star s1"></div>
                <div class="star s2"></div>
            </div>
            <div class="grade1 g4">
                <div class="grade_name">伶俐新手4</div>
                <div class="money"></div>
                <div class="money_num">165</div>
                <div class="star"></div>
                <div class="star s1"></div>
                <div class="star s2"></div>
                <div class="locked_bg">
                    <div class="locked"></div>
                </div>
            </div>
            <div class="dot">
                <div class="img1"></div>
            </div>
            <div class="query">
                <div class="img2"></div>
            </div>
        </div>
    </div>
</body>
</html>

<!-- 导入 zepto 使用zepto 来实现 dom元素操纵 -->
<script type="text/javascript" src="lib/zepto.js"></script>
<script type="text/javascript" src="lib/event.js"></script>
<script type="text/javascript" src="lib/fx.js"></script>
<script type="text/javascript" src="lib/touch.js"></script>
<!-- fadein toggle等 动画方法的模块 -->
<script type="text/javascript" src="lib/fx_methods.js"></script>